<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Hub 社区</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <!-- 在每个HTML文件的head部分添加 -->
    <link rel="stylesheet" th:href="@{/css/category.css}">
</head>
<body>
<header>
    <div class="header-container">
        <h1>AI Hub 社区</h1>
        <nav>
            <ul>
                <li><a th:href="@{/}">首页</a></li>
                <li><a th:href="@{/posts}">帖子</a></li>
                <li><a th:href="@{/users}">用户</a></li>
                <!-- 添加AI应用链接 -->
                <li><a th:href="@{/ai-tools}">AI应用</a></li>
                <!-- 已登录状态显示个人资料链接 -->
                <li th:if="${isAuthenticated}"><a th:href="@{/profile}">个人资料</a></li>
                <!-- 未登录状态显示登录/注册 -->
                <li th:if="${!isAuthenticated}"><a th:href="@{/login}">登录</a></li>
                <li th:if="${!isAuthenticated}"><a th:href="@{/register}">注册</a></li>
                <!-- 已登录状态显示欢迎信息和退出 -->
                <li th:if="${isAuthenticated}" class="welcome-message">
                    欢迎：<span th:text="${username}"></span>
                    <a th:href="@{/logout}" class="logout-link">退出</a>
                </li>
            </ul>
        </nav>
    </div>
</header>

<!-- 添加分类导航栏 -->
<nav class="category-nav">
    <div class="category-nav-container">
        <ul>
            <li><a th:href="@{/}">推荐</a></li>
            <li th:each="category : ${popularCategories}">
                <a th:href="@{/posts/category/{name}(name=${category.name})}" th:text="${category.displayName}"></a>
            </li>
        </ul>
    </div>
</nav>

<main>
    <section class="hero">
        <h2>欢迎来到 AI Hub 社区</h2>
        <p>分享人工智能知识，交流编程经验</p>
        <div class="hero-buttons">
            <a href="/posts" class="btn">浏览帖子</a>
            <!-- 只有未登录用户才显示"立即注册"按钮 -->
            <a th:if="${!isAuthenticated}" href="/register" class="btn btn-primary">立即注册</a>
            <!-- 已登录用户显示"创建帖子"按钮 -->
            <a th:if="${isAuthenticated}" href="/create-post" class="btn btn-primary">创建帖子</a>
            </div>
    </section>

    <section class="featured-posts">
        <h3>精选帖子</h3>

        <!-- 动态显示点赞数最多的帖子 -->
        <div class="post-grid" th:if="${hotPosts != null and not hotPosts.isEmpty()}">
            <div th:each="post : ${hotPosts}" class="post-card">
                <div class="post-content">
                    <h3 class="post-title"><a th:href="@{/posts/{id}(id=${post.id})}" th:text="${post.title}"></a></h3>

                    <!-- 添加视频展示逻辑 -->
                    <div th:if="${post.videoUrl}" class="video-container">
                        <video class="hover-video" th:poster="${post.videoThumbnailUrl}" th:src="${post.videoUrl}" loop
                               muted>
                            <p>您的浏览器不支持HTML5视频播放</p>
                        </video>
                        <div class="play-icon">
                            <i class="fas fa-play"></i>
                        </div>
                    </div>

                    <!-- 添加图片展示逻辑 -->
                    <div th:unless="${post.videoUrl}" th:if="${post.coverImageUrl}">
                        <img th:src="@{${post.coverImageUrl}}" alt="帖子封面" class="post-cover">
                    </div>

                    <!-- 显示帖子分类标签 -->
                    <th:block th:if="${post.category != null}">
                        <span class="post-category" th:text="${post.category.displayName}">分类</span>
                    </th:block>

                    <p class="post-excerpt" 
                       th:text="${post.content != null ? #strings.abbreviate(post.content, 100) : '暂无内容'}">
                        帖子内容摘要...</p>
                    <div class="post-meta">
                        <span th:text="${post.user.username}">作者</span>
                        <span th:text="${#temporals.format(post.createdAt, 'yyyy-MM-dd')}">日期</span>
                        <span>👍 <span th:text="${post.likeCount}">0</span></span> <!-- 显示点赞数 -->
                    </div>
                    <a th:href="@{/posts/{id}(id=${post.id})}" class="read-more">阅读更多</a>
                </div>
            </div>
        </div>

        <!-- 如果没有热门帖子，显示默认内容 -->
        <div th:unless="${hotPosts != null and not hotPosts.isEmpty()}">
            <div class="post-card video-post-card">
                <div class="video-container">
                    <video class="hover-video" poster="/images/ml-thumbnail.jpg" loop muted>
                        <source src="/videos/ml-intro.mp4" type="video/mp4">
                    </video>
                    <div class="play-icon"></div>
                </div>
                <h4>如何开始学习机器学习</h4>
                <p>机器学习入门指南...</p>
                <a href="/posts/1">阅读更多</a>
            </div>
            <div class="post-card video-post-card">
                <div class="video-container">
                    <video class="hover-video" poster="/images/spring-boot-thumbnail.jpg" loop muted>
                        <source src="/videos/spring-boot-intro.mp4" type="video/mp4">
                    </video>
                    <div class="play-icon"></div>
                </div>
                <h4>Spring Boot 实战教程</h4>
                <p>构建现代化Java应用...</p>
                <a href="/posts/2">阅读更多</a>
            </div>
            <div class="post-grid">
                <div th:each="post : ${posts}" class="post-card">
                    <div class="post-content">
                        <h3 class="post-title"><a th:href="@{/posts/{id}(id=${post.id})}" th:text="${post.title}"></a>
                        </h3>

                        <!-- 添加视频展示逻辑 -->
                        <div th:if="${post.videoUrl}" class="video-container">
                            <video class="hover-video" th:poster="${post.videoThumbnailUrl}" th:src="${post.videoUrl}"
                                   loop muted>
                                <p>您的浏览器不支持HTML5视频播放</p>
                            </video>
                            <div class="play-icon">
                                <i class="fas fa-play"></i>
                            </div>
                        </div>

                        <p class="post-excerpt" th:text="${#strings.substring(post.content, 0, 150)} + '...'">
                            帖子内容摘要...</p>
                        <div class="post-meta">
                            <span th:text="${post.user.username}">作者</span>
                            <span th:text="${#temporals.format(post.createdAt, 'yyyy-MM-dd')}">日期</span>
                            <span th:text="${post.viewCount} 浏览"></span>
                        </div>
                        <a th:href="@{/posts/{id}(id=${post.id})}" class="read-more">阅读更多</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>

<footer>
    <p>&copy; 2025 AI Hub 社区. 保留所有权利.</p>
</footer>

<script th:src="@{/js/main.js}"></script> <!-- 使用th:src确保正确路径 -->
</body>
</html>